<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <body> 
        <span th:id="${namHocId}" class="namHocDuocChon_frame"></span>
        <span th:id="${khoiLopId}" class="khoiLopDuocChon_frame"></span>
        <div class="col-md-12">
            <label class="col-md-2 control-label">Lớp Học</label>
            <span th:id="${lopHocDuocChon.getid()}" th:if="${lopHocDuocChon}" class="lopHocDuocChon"></span>
            <span id="1" th:unless="${lopHocDuocChon}" class="lopHocDuocChon"></span>
            <div class="margin_button_top col-md-3">
                <select id="IDLopHoc" name="IDLopHoc" class="form-control">
                    <option th:each="lopHoc : ${listLopHoc}" th:text="${lopHoc.gettenLopHoc()}" th:value="${lopHoc.getid()}"/>                          
                    <option value="0" th:unless="${laNamHienTai}">Chưa xếp lớp</option>
                </select>  
            </div>
        </div>
        <div id="subTable" class="margin_button_top">
            <table id="table" class="margin_button_top table_hocsinh" style="word-wrap: break-word;">
                <thead>
                    <tr>                        
                        <th>Mã Học Sinh</th>
                        <th>Họ Tên</th>
                        <th>Ngày Sinh</th>
                        <th>Giới Tính</th>                        
                        <th>Địa Chỉ</th>
                        <th>Ngày Nhập Học</th>
                        <th>Ngày Nghỉ Học</th>
                        <th>Tác Vụ</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr th:id="${hocsinh.getid()}" align="center" th:each="hocsinh: ${listHocSinh}">                        
                        <td th:text="${hocsinh.getmaHocSinh()}" id="maHocSinh"/>
                        <td th:text="${hocsinh.gethoTen()}" id="hoTen"/>                        
                        <td th:text="${#dates.format(hocsinh.getngaySinh(),'dd/MM/yyyy')}" th:if="${hocsinh.getngaySinh()}" id="ngaySinh"/>
                        <td th:unless="${hocsinh.getngaySinh()}" id="ngaySinh"/>   
                        <td th:text="${hocsinh.getgioiTinh()}==1?${'Nam'}:${'Nữ'}" id="gioiTinh"/>                        
                        <td th:text="${hocsinh.getdiaChi()}" id="diaChi"/>
                        <td th:text="${#dates.format(hocsinh.getngayNhapHoc(),'dd/MM/yyyy')}"   th:if="${hocsinh.getngayNhapHoc()}" id="ngayNhapHoc"/>
                        <td th:unless="${hocsinh.getngayNhapHoc()}" id="ngayNhapHoc"/>   
                        <td th:text="${#dates.format(hocsinh.getngayNghiHoc(),'dd/MM/yyyy')}"  th:if="${hocsinh.getngayNghiHoc()}" id="ngayNghiHoc"/>                        
                        <td th:unless="${hocsinh.getngayNghiHoc()}" id="ngayNghiHoc"/>                                                     
                        <td th:unless="${hocsinh.maLopHoc}">
                            <div class="btn-group">
                                <a th:href="@{'/staff/management/students/edit/'+${hocsinh.getmaHocSinh()}}" title="SỬa" class="margin_action"><i class="glyphicon glyphicon-pencil"></i></a>     
                                <a title="Xếp Lớp" class="linkXepLop margin_action" th:id="${hocsinh.getid()}" data-toggle="modal" href="#xepLopMotHocSinhModal"><i class="glyphicon glyphicon-plus"></i></a>
                            </div>                            
                        </td>
                        <td th:if="${hocsinh.maLopHoc}">
                            <div class="btn-group">
                                <a th:href="@{'/staff/management/students/edit/'+${hocsinh.getmaHocSinh()}}" title="SỬa" class="margin_action"><i class="glyphicon glyphicon-pencil"></i></a>

                            </div> 
                        </td>
                    </tr>
                </tbody>
            </table> 
        </div>
        <div id="mainTable"></div>   
        <div class="modal fade" id="xepLopMotHocSinhModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Xếp Lớp Học Sinh</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="selectbasic">Chọn Lớp Để Xếp</label>
                            <div class="col-md-4">
                                <select id="IDLopHocXepLop" name="IDLopHocXepLop" class="form-control">
                                    <option th:each="lopHoc : ${listLopHoc}" th:text="${lopHoc.gettenLopHoc()}" th:value="${lopHoc.getid()}" class="lopHocModal"/>                                                  
                                </select>
                            </div>
                        </div>
<!--                        <label class="select_label">Chọn Lớp Để Xếp</label>
                        <select id="IDLopHocXepLop" name="IDLopHocXepLop" class="input-xlarge custom_checkbox">
                            <option th:each="lopHoc : ${listLopHoc}" th:text="${lopHoc.gettenLopHoc()}" th:value="${lopHoc.getid()}" class="lopHocModal"/>                                                  
                        </select> -->
                    </div>
                    <div class="modal-footer align_center">
                        <button type="button" class="btn btn-primary min_width_button_modal" id="xepLopButton">Yes</button>
                        <button type="button" class="btn btn-default min_width_button_modal" data-dismiss="modal">No</button>
                    </div>
                </div>
            </div> 
        </div> 
        <script th:inline="javascript">
            /*<![CDATA[*/
            jQuery(document).ready(function() {
                jQuery("#table").dataTable({"bJQueryUI": true});
                COMMON.activeMenu("quanly_nav");
            });

            var studentId;
            $(".linkXepLop").on('click', function() {
                studentId = $(this)[0].id;
            })
            var xepLopMotHocSinh_url = /*[[@{/staff/management/students/xeplop_hocsinh/}]]*/ "demo";
            var index_url = /*[[@{/staff/management/students/index/}]]*/"demo";
            $("#xepLopButton").on('click', function(e) {
                var lopHocId = $("#IDLopHocXepLop")[0].value;
                $.ajax({
                    url: xepLopMotHocSinh_url,
                    type: 'GET',
                    data: {lopHocId: lopHocId, hocSinhId: studentId},
                    success: function() {
                        document.location = index_url;
                    }
                })
                $('#xepLopMotHocSinhModal').modal('hide');

            })

//            var xepLopMotHocSinh_url = /*[[@{/staff/management/students/xeplop_hocsinh/}]]*/ "demo";                        
//            $("#xepLopButton").on('click', function(e){
//                var lopHocId = $("#IDLopHocXepLop")[0].value;
//                console.log(lopHocId);
//                
//            })
//            
            if ($(".lopHocDuocChon")[0].id == "1") {                
                $("#IDLopHoc")[0].value = "0";
            }
            //invisible Xep lop link if LopHoc khong phai la Chua xep lop
//            var lopHocId =$("#IDLopHoc")[0].value;            
//            if (lopHocId != "0") {                    
//                    var listLink = $(".linkXepLop");                    
//                    for (i = 0; i < listLink.length; i++) {                        
//                        listLink[i].style.display = "none";
//                    }
//                };
            var request_data_url = /*[[@{/staff/management/students/request_data/}]]*/ "demo";
            $("#IDLopHoc").on('change', function() {
                var self = $(this);
                var lopHocId = self[0].value;
                var namHocId = $(".namHocDuocChon_frame")[0].id;
                var khoiLopId = $(".khoiLopDuocChon_frame")[0].id;
                $.ajax({
                    url: request_data_url,
                    type: 'GET',
                    data: {lopHocId: lopHocId, namHocId: namHocId, khoiLopId: khoiLopId, requestElement: "lopHoc"},
                    success: function(data) {
                        $("#subTable")[0].style.display = "none";
                        $("#mainTable").html(data);
                    }
                })
            })
            /*]]>*/
        </script>    
    </body>
</html>